<template>
	<view class="evalinfo">
		<view class="eval_img">
			<view class="title1">维修完成</view>
			<view class="title2">请为本次维修服务进行评价！</view>
		</view>
		<view class="eval_text">
			<view class="num">
				<view>订单号：</view>
				<view>{{ orderItem.orderNo }}</view>
			</view>
			<!-- <view class="time">
				<view>验收时间：</view>
				<view>{{ time }}</view>
			</view> -->
		</view>
		<view class="repairPeople">
			<view class="repairPeople_title">
				<view class="title_text">评价维修人员：</view>
				<view class="stars">
					<u-rate v-model="flag1" size="24"></u-rate>
				</view>
			</view>
			<view class="repairPeople_content">
				<u-textarea placeholder="点评一下，您的意见很重要哦！~" @input="bindValue1" v-model="value1" />
			</view>
		</view>
		<view class="repairPeople">
			<view class="repairPeople_title">
				<view class="title_text">评价客服人员：</view>
				<view class="stars">
					<u-rate v-model="flag2" size="24"></u-rate>
				</view>
			</view>
			<view class="repairPeople_content">
				<u-textarea placeholder="点评一下，您的意见很重要哦！~" @input="bindValue2" v-model="value2" />
			</view>
		</view>
		<view class="eval_btn">
			<u-button @click="toEval" type="primary">评价</u-button>
		</view>
		<view class="eval_bottom">
			<view>
				<image src="@/static/images/explain.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderItem:{},
			flag1: 0,
			flag2: 0,
			value1: '',
			value2: '',
		};
	},
	methods: {
		bindValue1(e) {
			this.value1 = e;
		},
		bindValue2(e) {
			this.value2 = e;
		},
		toEval() {
			let obj = {
				id:this.orderItem.id,
				orderNo:this.orderItem.orderNo,
				orderDate:this.orderItem.orderDate,
				type:6,
				repairComment:this.value1,
				serviceComment:this.value2,
				repairScore:this.flag1,
				serviceScore:this.flag1,
			}
			console.log(obj);
			this.$newapi.updateOrder(obj).then(res=>{
				if(res.code == 200){
					uni.redirectTo({
						url: '/pagesIndex/evaluate/eavlsuccess'
					});
				}
			})
		}
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		this.orderItem = JSON.parse(options.item)
		console.log(this.orderItem);
	},
};
</script>

<style lang="less" scoped>
.evalinfo {
	width: 100%;
	height: 100vh;
	background-color: rgb(250, 250, 250);
}

.eval_img {
	width: 100%;
	padding: 30rpx 0;
	line-height: 70rpx;
	text-align: center;
	.title1{
		font-size: 46rpx;
		color: #000;
	}
	.title2{
		font-size: 34rpx;
		color: #999;
	}
}


.eval_text {
	width: 100%;
	// height: 150rpx;
}

.num,
.time {
	height: 75rpx;
	display: flex;
	justify-content: center;
}

.num {
	font-weight: 600;
	font-size: 28rpx;
	color: black;
}

.num view {
	height: 75rpx;
	line-height: 105rpx;
}

.time view {
	height: 75rpx;
	line-height: 45rpx;
}

.time {
	font-size: 24rpx;
	color: #a0a0a0;
}

.repairPeople {
	width: 100%;
	// height: 400rpx;
	margin-top: 40rpx;
}

.repairPeople_title {
	width: 80%;
	height: 100rpx;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-direction: row;
}

.title_text {
	width: 35%;
	height: 100rpx;
	font-size: 28rpx;
	color: black;
	line-height: 100rpx;
	text-align: left;
}

.stars {
	width: 65%;
	height: 100rpx;
	display: flex;
	flex-direction: row;
}

.repairPeople_content {
	width: 80%;
	// height: 300rpx;
	margin-left: auto;
	margin-right: auto;
}

.repairPeople_content textarea {
	width: 90%;
	height: 250rpx;
	font-size: 22rpx;
	background-color: rgb(239, 239, 239);
	padding: 20rpx;
}


.eval_btn {
	width: 80%;
	height: 80rpx;
	margin: 0 auto;
	margin-top: 50rpx;
}

.eval_btn button {
	width: 60%;
	height: 80rpx;
	margin-left: auto;
	margin-right: auto;
	background-color: rgb(168, 66, 0);
	color: #fff;
	font-size: 34rpx;
	/* font-weight: bold; */
	letter-spacing: 2px;
	line-height: 80rpx;
	text-align: center;
	border-radius: 20rpx;
}

.eval_bottom {
	width: 100%;
	height: 120rpx;
}

.eval_bottom view {
	width: 246rpx;
	height: 90rpx;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100rpx;
}

.eval_bottom view image {
	width: 246rpx;
	height: 90rpx;
}
</style>
